<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>商家列表</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link href="__PUBLIC__/Css/store.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
	<!-- <nav class="navbar navbar-fixed-top header">
	  <div class="container" >
	  	<div class="row">
		  	<div class="col-xs-3">
			  	<button class="btn remove">
		                <span class='glyphicon glyphicon-remove '></span>
		        </button>
	        </div>
	        <div class="col-xs-6 text-center">
	        	<span class="title">福州同城活动</span>
	        </div>
	        <div class="col-xs-3">
	        	<button class="btn pull-right option">
		                <span class='glyphicon glyphicon-option-vertical'></span>
		        </button>

	        </div>
        </div>
	  </div>
	</nav>
	
	<div class="container infor">
		<div class="row">
			
			<div class="col-xs-2">
				<img src="./Public/images/more_icon_none.png" class="img-responsive" alt="外婆家"/>
			</div>
			<div class="col-xs-3 city">福州<span class="glyphicon glyphicon-menu-down"></span></div>
			<div class="col-xs-7">
				霸气值：<span class="num">1</span><button class="btn btn-default btn-xs about"><span class="glyphicon glyphicon-question-sign"></span></button>
				<button class="btn btn-default pull-right sign">已签到</button>
			</div>
		</div>
	</div>

	<div class="container">
		<img src="./Public/images/thumb.jpg" class="img-responsive" alt="外婆家"/>
	</div> -->
	<nav class="container-fluid navbar navbar-inverse ">
       <div class="navbar-header">
         <div class="navbar-brand" >
         	<a href="__MODULE__/qlindex/qlindex" style="text-decoration: none"><span class="glyphicon glyphicon-arrow-left" style="color:#9d9d9d"></span>
         	<span style="color:#9d9d9d" >主页</span></a>
         </div>
         <div class="text-center">
	        	<div class="btn-group" role="group" aria-label="..." style="margin-left:-90px;">
				  <button type="button" class="btn btn-primary" id="shop">商户</button>
				  <button type="button" class="btn btn-default" id="map">地图</button>
				</div>
	        </div>
       </div>
  	</nav>
	<div class="container" >
	  	<!-- <div class="row">
		  	<div class="col-xs-3" style="font-size:20px;">
		            <span class='glyphicon glyphicon-menu-left '></span>
	        </div>
	        <div class="col-xs-6">
	        	<div class="btn-group" role="group" aria-label="...">
				  <button type="button" class="btn btn-default" id="shop">商户</button>
				  <button type="button" class="btn btn-default" id="map">地图</button>
				</div>
	        </div>
	    </div> -->
		<div class="row">
		<div class="col-xs-12">
		    <form class="form-inline">
			  <div class="form-group">
			    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
			    <div class="input-group">
			      <div class="input-group-addon" id="search"><span class="glyphicon glyphicon-search"></span></div>
			      <input type="text" class="form-control" placeholder="" id="dataInput">
			    </div>
			  </div>
			</form>
		  </div>
		</div>
		</div>

	<div class="container " style="margin-bottom:20px;">
		<div class=" btn-group btn-group-justified">
				<div class="btn-group" id="around">
				  <button type="button" class="btn  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color:#337ab7;border-color:#2e6da4" id="fj">附近商家
				  </button>
				</div>


				<div class="btn-group" id="hot">
				  <button type="button" class="btn  dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" style="background-color:#d7d7d7;border-color:#ccc" id="rm">热门商家</span>
				  </button>
				</div>	

		</div>
	
	</div>

	<div class="container activities" id="shops">
		<!-- <volist name="list" id="vo">
			<div class="row media ad">
	       
	            <div class="media-left col-xs-4 ">
	                    <img class="img-responsive" src="./Public/images/a.jpg" alt="...">
	            </div>
	            <div class="media-body ">
	                <h4 class="media-heading">{$vo.shopname}</h4>
	                <div style="font-size:14px;">
	                	<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span >￥<span>{$vo.price}</span>/人</span>
	            	</div>
	            	<div>
	            		<span >{$vo.type}</span>
	            		<span class="pull-right" style="padding-right:15px;">1.8km</span>
	            	</div>
	            </div> -->

	            <!-- <div class="media-right " style="padding-right:15px;">
	               抽</button>
	            </div> -->
	    	<!-- </div>
		</volist> -->
	    <!-- <div class="row media ad">
	       
	            <div class="media-left col-xs-4 ">
	                    <img class="img-responsive" src="./Public/images/a.jpg" alt="...">
	            </div>
	            <div class="media-body ">
	                <h4 class="media-heading">大丰收鱼庄</h4>
	                <div style="font-size:14px;">
	                	<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span >￥<span>88</span>/人</span>
	            	</div>
	            	<div>
	            		<span >烧烤</span>
	            	</div>
	            </div>
	    </div>

		    <div class="row media ad">
	       
	            <div class="media-left col-xs-4 ">
	                    <img class="img-responsive" src="./Public/images/a.jpg" alt="...">
	            </div>
	            <div class="media-body ">
	                <h4 class="media-heading">【外面霸王餐】50元外面券免费抢！</h4>
	                <div class="media-bottom">
		                <span >未知</span>
		                <span class="pull-right">180人中奖</span>
	            	</div>
	            </div>
	            <div class="media-right " style="padding-right:15px;">
	                <button class="btn bg-primary">抽</button>
	            </div>
	       
	    </div>

	    <div class="row media ad">
	       
	            <div class="media-left col-xs-4 ">
	                    <img class="img-responsive" src="./Public/images/a.jpg" alt="...">
	            </div>
	            <div class="media-body ">
	                <h4 class="media-heading">【外面霸王餐】50元外面券免费抢！</h4>
	                <div class="media-bottom">
		                <span >未知</span>
		                <span class="pull-right">180人中奖</span>
	            	</div>
	            </div>
	            <div class="media-right " style="padding-right:15px;">
	                <button class="btn bg-primary">抽</button>
	            </div>
	       
	    </div>

	    <div class="row media ad">
	       
	            <div class="media-left col-xs-4 ">
	                    <img class="img-responsive" src="./Public/images/a.jpg" alt="...">
	            </div>
	            <div class="media-body ">
	                <h4 class="media-heading">【外面霸王餐】50元外面券免费抢！</h4>
	                <div class="media-bottom">
		                <span >未知</span>
		                <span class="pull-right">180人中奖</span>
	            	</div>
	            </div>
	            <div class="media-right " style="padding-right:15px;">
	                <button class="btn bg-primary">抽</button>
	            </div>
	       
	    </div> -->

    </div>

	
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=o4jtg1jg3TumASwaBl8DVKKTC1qbysvb"></script>
    <script>
    // if ('{$kind}') {
    // 	alert('{$kind}')
    // }
    
    	//调用百度地图获取位置API
		var geolocation = new BMap.Geolocation();
		geolocation.getCurrentPosition(function(r){
			if(this.getStatus() == BMAP_STATUS_SUCCESS){
				var mk = new BMap.Marker(r.point);
				// alert('您的位置：'+r.point.lng+','+r.point.lat);
				select("1",'{$kind}',r.point.lng,r.point.lat);   //页面一进来，根据百度地图获取的位置加载附近的商家，百度地图获取位置有延时，所以页面会有几秒的延时加载  
				showAround("1",'{$kind}',r.point.lng,r.point.lat); //点击附近的商家
				showHot("2",'{$kind}',r.point.lng,r.point.lat);   //点击热门
				search("3",'{$kind}',r.point.lng,r.point.lat);	//点击搜索
				showMap(r.point.lng,r.point.lat);		//地图跳转
			}
			else {
				alert('failed'+this.getStatus());
			}        
		},{enableHighAccuracy: true})



		//构造商店列表
    	function create(id,img,name,score,price,type,$dis){
    		var $todetails=$('<a style="text-decoration: none"></a>');
    		$todetails.attr("href","__CONTROLLER__/shopDetails/id/"+id);
    		var $shop=$('<div class="row media ad" style="padding-bottom:10px;border-bottom:2px solid #EDEDED;"></div>');
    		var $shopimg=$('<div class="media-left col-xs-4 "></div>');
    		var $img=$('<img class="img-responsive"  alt="...">');

    		var $shopinfor=$('<div class="media-body "></div>');
    		var $shopname=$('<h4 class="media-heading">'+name+'</h4>');
    		var $shopscore=$('<div style="font-size:14px;color:#9F2D20;"></div>');

    		for (var i = 0;i<score; i++) {
    			var $star=$('<span class="glyphicon glyphicon-star"></span>');
    			$star.appendTo($shopscore);
    		};
    		var $price=$('<span style="color:black;">￥<span>'+price+'</span>/人</span>');
    		var $infor=$('<div></div>');
    		var $type=$('<span >'+type+'</span>');
    		var $dis=$('<span class="pull-right" style="padding-right:15px;">'+dis+'Km</span>');

    		$img.attr("src",img);
    		$img.appendTo($shopimg);
    		$shopimg.appendTo($todetails);

    		$shopname.appendTo($shopinfor);
    		$shopscore.appendTo($shopinfor);
    		$price.appendTo($shopscore);
    		$shopinfor.appendTo($todetails);

    		$type.appendTo($infor);
    		$dis.appendTo($infor);
    		$infor.appendTo($shopinfor);

    		$shop.appendTo($("#shops"));
    		$todetails.appendTo($shop);

    		
    	}


   //  	function search($lat,$lon){
			// $("#search").on("click",function(){
			// 	$("#shops").empty();

			// 	var $infor=$("#dataInput").val();
			// 	alert($infor);
			// 	var $jsonobj={"infor":$infor,"lat":$lat,"lon":$lon};
			// 	$.ajax({                                    
			//         type:"post",
			//         url:"__CONTROLLER__/shopSearch/",
			//         dataType:"json",
			//         data:$jsonobj,
			//         success:function(data){
			//         	// alert(1)
			//         	console.log(data);
			//         	$(data).each(function(i,val){
			//         		img=val.logo;
			//         		name=val.shopname;
			//         		score=val.score;
			//         		price=val.price;
			//         		type=val.type;
			//         		dis=val.dis;
			//         		create(img,name,score,price,type,dis);
			//         	});
			//         },
			//         error:function(XMLResponse,err){
			//             console.log(err);
			//         },
			// 	});
			// });
   //  	}

   		//ajax请求后台显示商家,$type:{1:按距离显示商家,2:按热门显示商家,3:按搜索条件显示商家};$kind:商户类型
   		function select($type,$kind,$lat,$lon){
   			var $infor=$("#dataInput").val();
				// alert($infor);
				var $jsonobj={"type":$type,"kind":$kind,"infor":$infor,"lat":$lat,"lon":$lon};  //"infor":搜索商家时的搜索值
				$.ajax({                                    
			        type:"post",
			        url:"__CONTROLLER__/shopSearch/",
			        dataType:"json",
			        data:$jsonobj,
			        success:function(data){
			        	// alert(1)
			        	// console.log(data);
			        	// alert(data)
			        	$(data).each(function(i,val){
			        		id=val.bs_id;
			        		img=val.logo;
			        		name=val.shopname;
			        		score=val.score;
			        		price=val.price;
			        		type=val.type;
			        		dis=val.dis;
			        		create(id,img,name,score,price,type,dis);
			        	});
			        },
			        error:function(XMLResponse,err){
			            console.log(err);
			        },
				});
   		}

   		//点击附近的商家
   		function showAround($type,$kind,$lat,$lon){
   			$("#around").on("click",function(){
   				$("#dataInput").val("");
				$("#shops").empty();
				select($type,$kind,$lat,$lon);

				$("#fj").css({"background-color":"#337ab7","border-color":"#2e6da4"});
				$("#rm").css({"background-color":"#d7d7d7","border-color":"#ccc"});
			});
   		}

   		//点击热门
   		function showHot($type,$kind,$lat,$lon){
   			$("#hot").on("click",function(){
   				$("#dataInput").val("");
				$("#shops").empty();
				select($type,$kind,$lat,$lon);

				$("#rm").css({"background-color":"#337ab7","border-color":"#2e6da4"});
				$("#fj").css({"background-color":"#d7d7d7","border-color":"#ccc"});
			});
   		}

   		//点击搜索
    	function search($type,$kind,$lat,$lon){
			$("#search").on("click",function(){
				$("#shops").empty();
				select($type,$kind,$lat,$lon);
				// var $infor=$("#dataInput").val();
				// // alert($infor);
				// var $jsonobj={"type":$type,"infor":$infor,"lat":$lat,"lon":$lon};
				// $.ajax({                                    
			 //        type:"post",
			 //        url:"__CONTROLLER__/shopSearch/",
			 //        dataType:"json",
			 //        data:$jsonobj,
			 //        success:function(data){
			 //        	// alert(1)
			 //        	console.log(data);
			 //        	$(data).each(function(i,val){
			 //        		img=val.logo;
			 //        		name=val.shopname;
			 //        		score=val.score;
			 //        		price=val.price;
			 //        		type=val.type;
			 //        		dis=val.dis;
			 //        		create(img,name,score,price,type,dis);
			 //        	});
			 //        },
			 //        error:function(XMLResponse,err){
			 //            console.log(err);
			 //        },
				// });
			});
    	}

		// $("#search").on("click",function(){
		// 	$("#shops").empty();

		// 	var $infor=$("#dataInput").val();
		// 	alert($infor);
		// 	var $jsonobj={"infor":$infor};
		// 	$.ajax({                                    
		//         type:"post",
		//         url:"__CONTROLLER__/shopSearch/",
		//         dataType:"json",
		//         data:$jsonobj,
		//         success:function(data){
		//         	// alert(1)
		//         	console.log(data);
		//         	$(data).each(function(i,val){
		//         		img=val.logo;
		//         		name=val.shopname;
		//         		score=val.score;
		//         		price=val.price;
		//         		type=val.type;
		//         		create(img,name,score,price,type);
		//         	});
		//         },
		//         error:function(XMLResponse,err){
		//             console.log(err);
		//         },
		// 	});
		// });
		
		//点击地图
   		function showMap($lat,$lon){
   			$("#map").on("click",function(){
   				window.location.href="__CONTROLLER__/showMap/lat/"+$lat+"/lon/"+$lon; 
   			});
   		}

		$('#dataInput').bind('keypress',function(event){
            if(event.keyCode == "13")    
            {
               $infor=$("#dataInput").val();
				alert($infor)
            }
        });
    </script>
</body>
</html>